<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lista de libros</title>
</head>

<body>
<h1>My Book List</h1>
<script>
var books = [
  {title: 'The Design of EveryDay Things',
   author: 'Don Norman',
   alreadyRead: false
  },
  {title: 'The Most Human Human',
   author: 'Brian Christian',
   alreadyRead: true
  }];
    
for (var i = 0; i < books.length; i++) {
  var bookP = document.createElement('p');
  var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
  bookP.appendChild(bookDescription);
  document.body.appendChild(bookP);
}

// Or, with the bonuses:
var books = [
  {title: 'The Design of EveryDay Things',
   img: 'http://3.bp.blogspot.com/-ij_YBKzs7xI/UfLrlo3uE4I/AAAAAAAAAao/s5awjH4ah68/s1600/Cover+DOET2+Cover+May+25,+2013.jpg',
   author: 'Don Norman',
   alreadyRead: false
  },
  {title: 'The Most Human Human',
   img: 'http://3.bp.blogspot.com/-tYSD8dXEJV8/T1ZcO6vxnTI/AAAAAAAAAME/Xognk7KP4Zg/s1600/MostHuman.jpg',
   author: 'Brian Christian',
   alreadyRead: true
  }];
    
var bookList = document.createElement('ul');
for (var i = 0; i < books.length; i++) {
  var bookItem = document.createElement('li');
  var bookImg = document.createElement('img');
  bookImg.src = books[i].img;
  bookItem.appendChild(bookImg);
  var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
  bookItem.appendChild(bookDescription);
  if (books[i].alreadyRead) {
    bookItem.style.color = 'grey';
  }
  bookList.appendChild(bookItem);
}
document.body.appendChild(bookList);

var bookList = document.createElement('ol');
for (var i = 0; i < books.length; i++) {
  var bookItem = document.createElement('li');
  var bookImg = document.createElement('img');
  bookImg.src = books[i].img;
  bookItem.appendChild(bookImg);
  var bookDescription = document.createTextNode(books[i].title + ' by ' + books[i].author);
  bookItem.appendChild(bookDescription);
  if (books[i].alreadyRead) {
    bookItem.style.color = 'grey';
  }
  bookList.appendChild(bookItem);
}
document.body.appendChild(bookList);
</script>
  
</body>
</html>